Generice TypeScript: Stăpânirea tipurilor de date complexe pentru aplicații robuste

TypeScript, un superset al JavaScript, le oferă dezvoltatorilor puterea de a scrie cod mai robust și mai ușor de întreținut prin intermediul tipizării statice. Printre cele mai puternice caracteristici ale sale se numără genericele, care vă permit să scrieți cod ce poate funcționa cu o varietate de tipuri de date, menținând în același timp siguranța tipului. Acest ghid oferă o explorare cuprinzătoare a genericelor TypeScript, concentrându-se pe aplicarea lor la tipuri de date complexe în contextul dezvoltării software globale.

Ce sunt genericele?

Genericele oferă o modalitate de a scrie cod reutilizabil care poate funcționa cu diferite tipuri. În loc să scrieți funcții sau clase separate pentru fiecare tip pe care doriți să-l suportați, puteți scrie o singură funcție sau clasă care utilizează parametri de tip. Acești parametri de tip sunt substituenți pentru tipurile reale care vor fi utilizate atunci când funcția sau clasa este apelată sau instanțiată. Acest lucru este deosebit de util atunci când lucrați cu structuri de date complexe în care tipul de date din acele structuri poate varia.

Beneficiile utilizării genericelor

• Reutilizarea codului: Scrieți cod o singură dată și utilizați-l cu diferite tipuri. Acest lucru reduce duplicarea codului și face baza de cod mai ușor de întreținut.
• Siguranța tipului: Genericele permit compilatorului TypeScript să impună siguranța tipului la momentul compilării. Acest lucru ajută la prevenirea erorilor de rulare legate de neconcordanțele de tip.
• Lizibilitate îmbunătățită: Genericele fac codul mai lizibil, indicând clar tipurile cu care funcțiile și clasele dvs. sunt concepute să funcționeze.
• Performanță sporită: În unele cazuri, genericele pot duce la îmbunătățiri de performanță, deoarece compilatorul poate optimiza codul generat pe baza tipurilor specifice utilizate.

Sintaxa de bază a genericelor

Sintaxa de bază a genericelor implică utilizarea parantezelor unghiulare (< >) pentru a declara parametri de tip. Acești parametri de tip sunt de obicei denumiți T, K, V, etc., dar puteți folosi orice identificator valid. Iată un exemplu simplu de funcție generică:

function identity<T>(arg: T): T {
  return arg;
}

let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(123);
let myBoolean: boolean = identity<boolean>(true);

console.log(myString); // Output: hello
console.log(myNumber); // Output: 123
console.log(myBoolean); // Output: true

În acest exemplu, <T> declară un parametru de tip numit T. Funcția identity primește un argument de tip T și returnează o valoare de tip T. Când apelați funcția, puteți specifica explicit parametrul de tip (de ex., identity<string>) sau puteți lăsa TypeScript să-l infereze pe baza tipului argumentului.

Lucrul cu tipuri de date complexe

Genericele devin deosebit de valoroase atunci când lucrați cu tipuri de date complexe, cum ar fi tablouri, obiecte și interfețe. Să explorăm câteva scenarii comune:

Tablouri generice

Puteți utiliza generice pentru a crea funcții sau clase care funcționează cu tablouri de diferite tipuri:

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

let numberArray: number[] = [1, 2, 3, 4, 5];
let stringArray: string[] = ["apple", "banana", "cherry"];

console.log(arrayToString(numberArray)); // Output: 1, 2, 3, 4, 5
console.log(arrayToString(stringArray)); // Output: apple, banana, cherry

Aici, funcția arrayToString primește un tablou de tip T[] și returnează o reprezentare de tip șir de caractere a tabloului. Această funcție funcționează cu tablouri de orice tip, făcând-o extrem de reutilizabilă.

Obiecte generice

Genericele pot fi, de asemenea, utilizate pentru a defini funcții sau clase care funcționează cu obiecte de diferite forme:

interface Person {
  name: string;
  age: number;
  country: string; // Adăugat țară pentru context global
}

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string; // Adăugat monedă pentru context global
}

function displayInfo<T extends { name: string }>(item: T): void {
  console.log(`Name: ${item.name}`);
}

let person: Person = { name: "Alice", age: 30, country: "USA" };
let product: Product = { id: 1, name: "Laptop", price: 1200, currency: "USD" };

displayInfo(person); // Output: Name: Alice
displayInfo(product); // Output: Name: Laptop

În acest exemplu, funcția displayInfo primește un obiect de tip T care trebuie să aibă o proprietate name de tip șir de caractere. Clauza extends { name: string } este o constrângere, care specifică cerințele minime pentru parametrul de tip T. Acest lucru asigură că funcția poate accesa în siguranță proprietatea name.

Utilizare avansată a genericelor

Genericele TypeScript oferă funcționalități mai avansate care vă permit să creați cod și mai flexibil și mai puternic. Să explorăm câteva dintre aceste funcționalități:

Parametri de tip multipli

Puteți defini funcții sau clase cu mai mulți parametri de tip:

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

interface Name {
  firstName: string;
}

interface Age {
  age: number;
}

const person: Name = { firstName: "Bob" };
const details: Age = { age: 42 };

const merged = merge(person, details);
console.log(merged.firstName); // Output: Bob
console.log(merged.age); // Output: 42

Funcția merge primește două obiecte de tipurile T și U și returnează un obiect nou care conține proprietățile ambelor obiecte. Aceasta este o modalitate puternică de a combina date din surse diferite.

Constrângeri generice

După cum s-a arătat anterior, constrângerile vă permit să restricționați tipurile care pot fi utilizate cu un parametru de tip generic. Acest lucru asigură că codul generic poate opera în siguranță pe tipurile specificate.

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]); // Output: 3
loggingIdentity("hello"); // Output: 5
// loggingIdentity(123); // Eroare: Argumentul de tip 'number' nu poate fi atribuit parametrului de tip 'Lengthwise'.

Funcția loggingIdentity primește un argument de tip T care trebuie să aibă o proprietate length de tip număr. Acest lucru asigură că funcția poate accesa în siguranță proprietatea length.

Clase generice

Genericele pot fi, de asemenea, utilizate cu clase:

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(d => d !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem("apple");
textStorage.addItem("banana");
textStorage.removeItem("apple");
console.log(textStorage.getItems()); // Output: [ 'banana' ]

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
numberStorage.removeItem(1);
console.log(numberStorage.getItems()); // Output: [ 2 ]

Clasa DataStorage poate stoca date de orice tip T. Acest lucru vă permite să creați structuri de date reutilizabile care sunt sigure din punct de vedere al tipului.

Interfețe generice

Interfețele generice sunt utile pentru definirea contractelor care pot funcționa cu diferite tipuri. De exemplu:

interface Result<T, E> {
  success: boolean;
  data?: T;
  error?: E;
}

interface User {
  id: number;
  username: string;
  email: string;
}

interface ErrorMessage {
  code: number;
  message: string;
}

function fetchUser(id: number): Result<User, ErrorMessage> {
  if (id === 1) {
    return { success: true, data: { id: 1, username: "john.doe", email: "john.doe@example.com" } };
  } else {
    return { success: false, error: { code: 404, message: "User not found" } };
  }
}

const userResult = fetchUser(1);
if (userResult.success) {
  console.log(userResult.data.username);
} else {
  console.log(userResult.error.message);
}

Interfața Result definește o structură generică pentru reprezentarea rezultatului unei operațiuni. Aceasta poate conține fie date de tip T, fie o eroare de tip E. Acesta este un model comun pentru gestionarea operațiunilor asincrone sau a operațiunilor care pot eșua.

Tipuri utilitare și generice

TypeScript oferă mai multe tipuri utilitare încorporate care funcționează bine cu genericele. Aceste tipuri utilitare vă pot ajuta să transformați și să manipulați tipurile în moduri puternice.

Partial<T>

Partial<T> face toate proprietățile de tip T opționale:

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = { name: "Alice" }; // Valid

Readonly<T>

Readonly<T> face toate proprietățile de tip T doar pentru citire (readonly):

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 42 };
// readonlyPerson.age = 43; // Eroare: Nu se poate atribui valoare lui 'age' deoarece este o proprietate doar pentru citire.

Pick<T, K>

Pick<T, K> selectează un set de proprietăți K din tipul T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const nameAndAge: NameAndAge = { name: "Charlie", age: 28 };

Omit<T, K>

Omit<T, K> elimină un set de proprietăți K din tipul T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, "email">;

const personWithoutEmail: PersonWithoutEmail = { name: "David", age: 35 };

Record<K, T>

Record<K, T> creează un tip cu chei K și valori de tip T:

type CountryCodes = "US" | "CA" | "UK" | "DE" | "FR" | "JP" | "CN" | "IN" | "BR" | "AU"; // Listă extinsă pentru context global
type Currency = "USD" | "CAD" | "GBP" | "EUR" | "JPY" | "CNY" | "INR" | "BRL" | "AUD"; // Listă extinsă pentru context global

type CurrencyMap = Record<CountryCodes, Currency>;

const currencyMap: CurrencyMap = {
  "US": "USD",
  "CA": "CAD",
  "UK": "GBP",
  "DE": "EUR",
  "FR": "EUR",
  "JP": "JPY",
  "CN": "CNY",
  "IN": "INR",
  "BR": "BRL",
  "AU": "AUD",
};

Tipuri mapate

Tipurile mapate vă permit să transformați tipurile existente prin iterarea peste proprietățile lor. Aceasta este o modalitate puternică de a crea tipuri noi bazate pe cele existente. De exemplu, puteți crea un tip care face toate proprietățile unui alt tip doar pentru citire (readonly):

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = { name: "Eve", age: 25 };
// readonlyPerson.age = 26; // Eroare: Nu se poate atribui valoare lui 'age' deoarece este o proprietate doar pentru citire.

În acest exemplu, [K in keyof Person] iterează peste toate cheile interfeței Person, iar Person[K] accesează tipul fiecărei proprietăți. Cuvântul cheie readonly face fiecare proprietate doar pentru citire.

Tipuri condiționale

Tipurile condiționale vă permit să definiți tipuri bazate pe condiții. Aceasta este o modalitate puternică de a crea tipuri care se adaptează la diferite scenarii.

type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type StringType = NonNullable<MaybeString>; // string

function getValue<T>(value: T): NonNullable<T> {
  if (value == null) { // Gestionează atât null, cât și undefined
    throw new Error("Value cannot be null or undefined");
  }
  return value as NonNullable<T>;
}

try {
  const validValue = getValue("hello");
  console.log(validValue.toUpperCase()); // Output: HELLO

  const invalidValue = getValue(null); // Aceasta va arunca o eroare
  console.log(invalidValue); // Această linie nu va fi atinsă
} catch (error: any) {
  console.error(error.message); // Output: Value cannot be null or undefined
}

În acest exemplu, tipul NonNullable<T> verifică dacă T este null sau undefined. Dacă este, returnează never, ceea ce înseamnă că tipul nu este permis. Altfel, returnează T. Acest lucru vă permite să creați tipuri care sunt garantate a nu fi nule.

Cele mai bune practici pentru utilizarea genericelor

Iată câteva dintre cele mai bune practici de reținut atunci când utilizați generice:

• Folosiți nume descriptive pentru parametrii de tip: Alegeți nume care indică clar scopul parametrului de tip.
• Folosiți constrângeri pentru a limita tipurile care pot fi utilizate cu un parametru de tip generic: Acest lucru asigură că codul dvs. generic poate opera în siguranță pe tipurile specificate.
• Păstrați codul generic simplu și concentrat: Evitați complicarea excesivă a codului generic cu prea mulți parametri de tip sau constrângeri complexe.
• Documentați-vă codul generic în detaliu: Explicați scopul parametrilor de tip și orice constrângeri care sunt utilizate.
• Luați în considerare compromisurile dintre reutilizarea codului și siguranța tipului: Deși genericele pot îmbunătăți reutilizarea codului, ele pot face, de asemenea, codul mai complex. Cântăriți beneficiile și dezavantajele înainte de a utiliza generice.
• Luați în considerare localizarea și globalizarea (l10n și g11n): Când lucrați cu date care trebuie afișate utilizatorilor din diferite regiuni, asigurați-vă că genericele dvs. suportă formatarea adecvată și convențiile culturale. De exemplu, formatarea numerelor și a datelor poate varia semnificativ între localizări.

Exemple într-un context global

Să luăm în considerare câteva exemple despre cum pot fi utilizate genericele într-un context global:

Conversie valutară

interface ConversionRate {
  rate: number;
  fromCurrency: string;
  toCurrency: string;
}

function convertCurrency<T extends ConversionRate>(amount: number, rate: T): number {
  return amount * rate.rate;
}

const usdToEurRate: ConversionRate = { rate: 0.85, fromCurrency: "USD", toCurrency: "EUR" };
const amountInUSD = 100;
const amountInEUR = convertCurrency(amountInUSD, usdToEurRate);
console.log(`${amountInUSD} USD is equal to ${amountInEUR} EUR`); // Output: 100 USD is equal to 85 EUR

Formatarea datei

interface DateFormatOptions {
  locale: string;
  options: Intl.DateTimeFormatOptions;
}

function formatDate<T extends DateFormatOptions>(date: Date, format: T): string {
  return date.toLocaleDateString(format.locale, format.options);
}

const currentDate = new Date();

const usDateFormat: DateFormatOptions = { locale: "en-US", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const germanDateFormat: DateFormatOptions = { locale: "de-DE", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const japaneseDateFormat: DateFormatOptions = { locale: "ja-JP", options: { year: 'numeric', month: 'long', day: 'numeric' } };

console.log("US Date: " + formatDate(currentDate, usDateFormat));
console.log("German Date: " + formatDate(currentDate, germanDateFormat));
console.log("Japanese Date: " + formatDate(currentDate, japaneseDateFormat));

Serviciu de traducere

interface Translation {
  [key: string]: string; // Permite chei de limbă dinamice
}

interface LanguageData<T extends Translation> {
  languageCode: string;
  translations: T;
}

const englishTranslations: Translation = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our website!"
};

const spanishTranslations: Translation = {
  "hello": "Hola",
  "goodbye": "Adiós",
  "welcome": "¡Bienvenido a nuestro sitio web!"
};

const frenchTranslations: Translation = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre site web !"
};


const languageData: LanguageData<typeof englishTranslations>[] = [
  {languageCode: "en", translations: englishTranslations },
  {languageCode: "es", translations: spanishTranslations },
  {languageCode: "fr", translations: frenchTranslations}
];

function translate<T extends Translation>(key: string, languageCode: string, languageData: LanguageData<T>[]): string {
  const lang = languageData.find(lang => lang.languageCode === languageCode);
  if (!lang) {
    return `Translation for ${key} in ${languageCode} not found.`;
  }
  return lang.translations[key] || `Translation for ${key} not found.`;
}

console.log(translate("hello", "en", languageData)); // Output: Hello
console.log(translate("hello", "es", languageData)); // Output: Hola
console.log(translate("welcome", "fr", languageData)); // Output: Bienvenue sur notre site web !
console.log(translate("missingKey", "de", languageData)); // Output: Translation for missingKey in de not found.

Concluzie

Genericele TypeScript sunt un instrument puternic pentru scrierea de cod reutilizabil și sigur din punct de vedere al tipului, care poate funcționa cu tipuri de date complexe. Înțelegând sintaxa de bază, funcționalitățile avansate și cele mai bune practici ale genericelor, puteți îmbunătăți semnificativ calitatea și mentenabilitatea aplicațiilor dvs. TypeScript. Atunci când dezvoltați aplicații pentru un public global, genericele vă pot ajuta să gestionați diverse formate de date și convenții culturale, asigurând o experiență de utilizare fluidă pentru toată lumea.